<template>
  <div>
    <el-button class="hand-btn" type="primary" icon="el-icon-back" @click="goBack">返回</el-button>
    <el-button class="hand-btn" type="primary" @click="saveEdit">保存&返回</el-button>
    <el-card style="margin-top: 10px;margin-left: 2%;margin-right:2%">
      <el-card>
        <el-descriptions border>
          <el-descriptions-item label="方案名称">{{ project.name }}</el-descriptions-item>
          <el-descriptions-item label="方案描述">{{ project.describe }}</el-descriptions-item>
          <el-descriptions-item label="产品名称">{{ project.baseProduct.name }}</el-descriptions-item>
          <el-descriptions-item label="检测简称"><el-input v-model="quality.name" /></el-descriptions-item>
          <el-descriptions-item label="检测描述"><el-input v-model="quality.describe" /></el-descriptions-item>
        </el-descriptions>
      </el-card>
      <el-table
        :data="project.titles"
        tooltip-effect="dark"
        :show-header="false"
        border
        style="width: 100%;"
      >
        <el-table-column
          prop="name"
          width="200px"
        />
        <el-table-column
          prop="describe"
        />
      </el-table>
      <el-table
        :data="project.entitys"
        tooltip-effect="dark"
        border
        style="width: 100%;"
      >
        <el-table-column
          type="index"
          label="项次"
          width="50"
        />
        <el-table-column
          prop="quota.basePlan.name"
          width="150px"
          label="测试项目"
        />
        <el-table-column
          prop="quota.name"
          width="150px"
          label="测试指标"
        />
        <el-table-column
          prop="specs"
          width="150px"
          label="规格"
        />
        <el-table-column
          prop="no1"
          width="120px"
          label="NO.1"
        >
          <template slot-scope="scope">
            <el-input v-model="scope.row.no1" @change="check" />
          </template>
        </el-table-column>
        <el-table-column
          prop="no2"
          width="120px"
          label="NO.2"
        >
          <template slot-scope="scope">
            <el-input v-model="scope.row.no2" @change="check" />
          </template>
        </el-table-column>
        <el-table-column
          prop="no3"
          width="120px"
          label="NO.3"
        >
          <template slot-scope="scope">
            <el-input v-model="scope.row.no3" @change="check" />
          </template>
        </el-table-column>
        <el-table-column
          prop="no4"
          width="120px"
          label="NO.4"
        >
          <template slot-scope="scope">
            <el-input v-model="scope.row.no4" @change="check" />
          </template>
        </el-table-column>
        <el-table-column
          prop="no5"
          width="120px"
          label="NO.5"
        >
          <template slot-scope="scope">
            <el-input v-model="scope.row.no5" @change="check" />
          </template>
        </el-table-column>
        <el-table-column
          prop="judge"
          width="90px"
          label="系统"
        />
        <el-table-column
          prop="result"
          width="110px"
          label="人工"
        >
          <template slot-scope="scope">
            <el-input v-model="scope.row.result" />
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
<script>
import { get } from '@/api/project'
import { save } from '@/api/quality'
export default {
  name: 'QualityEdit',
  data() {
    return {
      project: { baseProduct: {}},
      quality: {},
      judges: [
        '合格', '不合格'
      ]
    }
  },
  created() {
    this.getProject(this.$route.query.id)
  },
  methods: {
    // 获取 easy-mock 的模拟数据
    getProject(id) {
      get(id).then(res => {
        console.log(res)
        this.project = res.data.data
      })
    },
    check() {
      for (const row of this.project.entitys) {
        if (row.type === '字符') {
          let being = false
          if (row.no1) {
            if (row.no1 === row.strVal) {
              row.judge = '合格'
              being = true
            } else {
              row.judge = '不合格'
              continue
            }
          }
          if (row.no2) {
            if (row.no2 === row.strVal) {
              row.judge = '合格'
              being = true
            } else {
              row.judge = '不合格'
              continue
            }
          }
          if (row.no3) {
            if (row.no3 === row.strVal) {
              row.judge = '合格'
              being = true
            } else {
              row.judge = '不合格'
              continue
            }
          }
          if (row.no4) {
            if (row.no4 === row.strVal) {
              row.judge = '合格'
              being = true
            } else {
              row.judge = '不合格'
              continue
            }
          }
          if (row.no5) {
            if (row.no5 === row.strVal) {
              row.judge = '合格'
              being = true
            } else {
              row.judge = '不合格'
              continue
            }
          }
          if (!being) {
            row.judge = null
          } else {
            if (row.result == null) {
              row.result = row.judge
            }
          }
        } else if (row.type === '数值') {
          let being = false
          if (row.no1) {
            if (row.miniVal <= row.no1 && row.no1 <= row.maxVal) {
              row.judge = '合格'
              being = true
            } else {
              row.judge = '不合格'
              continue
            }
          }
          if (row.no2) {
            if (row.miniVal <= row.no2 && row.no2 <= row.maxVal) {
              row.judge = '合格'
              being = true
            } else {
              row.judge = '不合格'
              continue
            }
          }
          if (row.no3) {
            if (row.miniVal <= row.no3 && row.no3 <= row.maxVal) {
              row.judge = '合格'
              being = true
            } else {
              row.judge = '不合格'
              continue
            }
          }
          if (row.no4) {
            if (row.miniVal <= row.no4 && row.no4 <= row.maxVal) {
              row.judge = '合格'
              being = true
            } else {
              row.judge = '不合格'
              continue
            }
          }
          if (row.no5) {
            if (row.miniVal <= row.no5 && row.no5 <= row.maxVal) {
              row.judge = '合格'
              being = true
            } else {
              row.judge = '不合格'
              continue
            }
          }
          if (!being) {
            row.judge = null
          } else {
            if (row.result == null) {
              row.result = row.judge
            }
          }
        }
      }
      this.project = JSON.parse(JSON.stringify(this.project))
    },
    goBack() {
      this.$router.back()
    },
    saveEdit() {
      const data = { projectId: this.project.id, projectName: this.project.name,
        productId: this.project.baseProduct.id, productName: this.project.name,
        id: this.project.id, name: this.project.name, describe: this.project.describe }
      data.titles = []
      for (const row of this.project.titles) {
        const ent = { name: row.name, describe: row.describe }
        data.titles.push(ent)
      }
      data.entitys = []
      for (const row of this.project.entitys) {
        const ent = { planId: row.quota.basePlan.id, planName: row.quota.basePlan.name, quotaId: row.quota.id, quotaName: row.quota.name, specs: row.specs,
          no1: row.no1, no2: row.no2, no3: row.no3, no4: row.no4, no5: row.no5, judge: row.judge, result: row.result }
        data.entitys.push(ent)
      }
      save(data).then(res => {
        this.$message.success(res.message)
        this.goBack()
      })
    }
  }
}
</script>

<style scoped>
  .handle-box {
    margin: 20px;
  }

  .handle-select {
    width: 120px;
  }

  .handle-input {
    margin: 10px;
    width: 300px;
    display: inline-block;
  }
  .table {
    width: 100%;
    font-size: 14px;
  }
  .red {
    color: #ff0000;
  }
  .hand-btn {
    margin: 5px;
  }
</style>
